import React, { useContext } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';

import { observer } from 'mobx-react-lite';
import MessageScreen from './message/MsgScreen';
import ProcessScreen from './industry/ProcessScreen';
import { colors } from '../constants/theme';
import MessageStore from '../store/messageStore';


const BottomTabBarComponent = (props) => (
  <BottomTabBar
    {...props}
    activeTintColor={colors.secondary}
  />
);

// message with indicator icon
const IconWithBadge = observer((props) => {
  const { unReadNum } = useContext(MessageStore);
  const {
    name, color, size
  } = props;
  return (
    <View style={{ width: 24, height: 24, margin: 5 }}>
      <AntDesign name={name} size={size} color={color} />
      {unReadNum > 0 && (
        <View
          style={styles.IconWithBadge}
        >
          <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
            {unReadNum}
          </Text>
        </View>
      )}
    </View>
  );
});

// component
const genTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;
  let IconComponent = AntDesign;
  let iconName;
  switch (routeName) {
    case 'Message':
      iconName = 'notification';
      IconComponent = (props) => <IconWithBadge {...props} />;
      break;
    case 'Industry':
      iconName = 'slack';
      break;
    default: break;
  }
  return <IconComponent name={iconName} size={26} color={tintColor} />;
};

const TabNavigator = createBottomTabNavigator({
  Industry: {
    screen: ProcessScreen,
    navigationOptions: {
      tabBarLabel: '工艺',
    }
  },
  Message: {
    screen: MessageScreen,
    navigationOptions: {
      tabBarLabel: '消息',
    }
  }
}, {
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => genTabBarIcon(navigation, focused, tintColor),
  }),
  tabBarComponent: BottomTabBarComponent,
});


const config = {
  Industry: '工艺',
  Message: '消息'
};
TabNavigator.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index];

  return {
    headerTitle: config[routeName]
  };
};

export default TabNavigator;

const styles = StyleSheet.create({
  IconWithBadge: {
    position: 'absolute',
    right: -6,
    top: -3,
    backgroundColor: 'red',
    borderRadius: 6,
    width: 12,
    height: 12,
    justifyContent: 'center',
    alignItems: 'center',
  }
});
